<!DOCTYPE html>
<html lang="en" class="h-100">

<head>
  <title>Hands-On Selenium WebDriver with Java</title>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="Boni Garcia">

  <link rel="icon" type="image/png" href="img/hands-on-icon.png">

  <link href="//cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
</head>

<body class="d-flex flex-column h-100">
  <main class="flex-shrink-2">
    <div class="container">
      <div class="row py-2">
        <div class="col col-10">
          <h1 class="display-4">Hands-On Selenium WebDriver with Java</h1>
          <h5>Practice site</h5>
        </div>
        <div class="col col-2">
          <a href="https://github.com/bonigarcia/selenium-webdriver-java"><img class="img-fluid"
              src="img/hands-on-icon.png"></a>
        </div>
      </div>
      <div class="row">
        <div class="col col-12">
          <hr class="my-4">
        </div>
      </div>
      <div class="row">
        <div class="col-12">
          <h1 class="display-6">Data types</h1>
        </div>
      </div>
      <div class="row">
        <div class="col-md-4 py-2">
          <label class="form-label w-100">First name
            <div class="alert py-2" id="first-name"></div>
          </label>
        </div>
        <div class="col-md-4 py-2">
          <label class="form-label w-100">Last name
            <div class="alert py-2" id="last-name"></div>
          </label>
        </div>
      </div>
      <div class="row">
        <div class="col-md-4 py-2">
          <label class="form-label w-100">Address
            <div class="alert py-2" id="address"></div>
          </label>
        </div>
        <div class="col-md-2 py-2">
          <label class="form-label w-100">Zip code
            <div class="alert py-2" id="zip-code"></div>
          </label>
        </div>
        <div class="col-md-3 py-2">
          <label class="form-label w-100">City
            <div class="alert py-2" id="city"></div>
          </label>
        </div>
        <div class="col-md-3 py-2">
          <label class="form-label w-100">Country
            <div class="alert py-2" id="country"></div>
          </label>
        </div>
      </div>
      <div class="row">
        <div class="col-md-4 py-2">
          <label class="form-label w-100">E-mail
            <div class="alert py-2" id="e-mail"></div>
          </label>
        </div>
        <div class="col-md-4 py-2">
          <label class="form-label w-100">Phone number
            <div class="alert py-2" id="phone"></div>
          </label>
        </div>
      </div>
      <div class="row">
        <div class="col-md-4 py-2">
          <label class="form-label w-100">Job position
            <div class="alert py-2" id="job-position"></div>
          </label>
        </div>
        <div class="col-md-4 py-2">
          <label class="form-label w-100">Company
            <div class="alert py-2" id="company"></div>
          </label>
        </div>
      </div>
    </div>
  </main>
  <footer class="footer mt-auto py-3 bg-light">
    <div class="container">
      <span class="text-muted">Copyright &copy; 2021-2022 <a href="https://bonigarcia.dev/">Boni Garc&iacute;a</a></span>
    </div>
  </footer>
  <script>
    const urlSearchParams = new URLSearchParams(window.location.search);
    const params = Object.fromEntries(urlSearchParams.entries());

    const elementNames = ["first-name", "last-name", "address", "zip-code", "city", "country", "e-mail", "phone", "job-position", "company"];
    elementNames.forEach((name) => {
      let element = document.getElementById(name);
      let value = params[name];
      let style = value ? "alert-success" : "alert-danger";
      element.innerText = value ? value : "N/A";
      element.classList.add(style);
    });
  </script>
</body>

</html>